<template>
  <div class="message">
      <div class="list_box" v-for="(item,index) in message" :key="index">
          <div class="title">{{item.title}}</div>
          <div class="number">
              <div class="number_time">发表时间：{{item.add_time | setTime}}</div>
              <div class="number_click">浏览：{{item.click}}次</div>
          </div>
          <div class="content" v-html="item.content"></div>
      </div>
      <div class="message_commenton">发表评论</div>
      <textarea class="message_textarea" v-model="textarea" name="" placeholder="欢迎发表评论" id="" cols="30" rows="10"></textarea>
      <div class="message_button" @click="commenton">发表评论</div>
  </div>
</template>

<script>
export default {
    name:'listmessage',
    data(){
        return{
            message:[],
            textarea:'',
            page:1,
        }
    },
    methods:{
        getmessage(){
            console.log(this);
            this.$axios.get('http://www.liulongbin.top:3005/api/getnew/' + this.$route.params.id).then((res) => {
                console.log(res);
                if(res.data.status == 0){
                    this.message = res.data.message;
                }
                console.log(this.message);
            });
            
        },
        discuss(){
            this.$axios.get('http://www.liulongbin.top:3005/api/getcomments/:' + this.$route.params.id+'?pageindex=' + this.page).then((res) => {
                console.log(res);
            })
        },
        commenton(){
            var data = {
                content:this.textarea,
            }
            console.log(data);
             this.$axios.post('http://www.liulongbin.top:3005/api/postcomment/:' + this.$route.params.id).then((res) => {
                console.log(res);
            })

        }
    },
    created(){
        this.getmessage();
        this.discuss();
    }
}
</script>

<style scoped>
    .message{
        padding:0 15px;
        box-sizing: border-box;
    }
    .title{
        font-size:16px;
        color:red;
        text-align: center;
        line-height: 18px;
        margin-top:20px;
        margin-bottom:15px;
    }
    .number{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size:12px;
        color:#007ACC;
    }
    .content{
        margin-top:15px;
        font-size:14px;
    }
    .message_commenton{
        font-size:14px;
        color:#333;
        font-weight: bold;
        margin-top:10px;
        margin-bottom:5px;
    }
    .message_textarea{
        width:100%;
        border:1px solid #e2e2e2;
        resize:none;
        padding:10px;
        box-sizing: border-box;
    }
    .message_button{
        width:200px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color:#FFF;
        background-color: #007ACC;
        margin:0 auto;
        margin-top:20px;
        border-radius: 10px;
    }
</style>